<template>
    <div>
        
        <div class="header">第一遍</div>
        <van-nav-bar title="登录" />
        <!-- 表单 -->
        <van-form ref="from" @submit="denglu">
            <van-field
                v-model="user.mobile"
                placeholder="请输入手机号"
                :rules="ruless.mo"
                name="phone"
            >
                <template v-slot:left-icon>
                    <i class="toutiao toutiao-shouji"></i>
                </template>
            </van-field>
            <van-field
                v-model="user.code"
                placeholder="请输入验证码"
                :rules="ruless.code"
            >
                <template v-slot:left-icon>
                    <i class="toutiao toutiao-yanzhengma"></i>
                </template>
                <template v-slot:button>
                    <van-button
                        native-type="button"
                        size="small"
                        @click="btn"
                        v-if="timeflag"
                        >发送验证码</van-button
                    >
                    <van-count-down
                        v-else
                        @change="jieshu"
                        :time="time"
                        format=" ss 秒"
                    />
                </template>
            </van-field>
            <div class="btnClass">
                <van-button block type="info" native-type="submit"
                    >提交</van-button
                >
            </div>
        </van-form>

    </div>
</template>
<script>
import { fasong, denglu } from "@/api/user";
export default {
    data() {
        return {
            user: {
                mobile: "",
                code: "246810",
            },
            // 定义表单的验证规则，表单验证需要一个数组对象
            ruless: {
                mo: [
                    { required: true, message: "手机号码不能为空" }, // 必填
                    { pattern: /^1\d{10}$/, message: "手机号码不正确" },
                ],
                code: [
                    { required: true, message: "验证码不能为空" },
                    { pattern: /\d{6}/, message: "必须要有6位" },
                ],
            },
            time: 3000,
            timeflag: true,
        };
    },
    methods: {
        async btn() {
            // 验证表单的正确，调用发送验证码的接口
            await this.$refs.from.validate("phone");

            // 如果校验不通过，这里都不会执行
            // 显示倒计时
            this.timeflag = false;
            try {
                // 校验通过，发送验证码
                await fasong(this.user.mobile);
                this.$toast.success("验证码发送成功！");
            } catch (err) {
                // 两种情况嘛，一是网络原因，请求都到不了服务器
                // 二是业务错误
                if (err.response) {
                    this.$toast.fail(err.response.data.message);
                } else {
                    this.$toast.fail("网络错误");
                }
            }
        },
        async denglu() {
            // 登录
            // 验证所有表单
            // 调用接口拿到token
            // 保存token
            // 登录成功
            try {
                // 表单在一开始就是验证通过的状态才会触发这个函数，这是vant组件库的一个比较优秀的特性
                // 调用接口
                let token = await denglu(this.user);
                // 保存token
                // localStorage.setItem("token", token.data.data.token);
            } catch (err) {
                if (err.response) {
                    this.$toast.fail(err.response.data.message);
                } else {
                    this.$toast.fail("网络错误");
                }
            }
        },
        jieshu(jsc) {
            if (jsc.seconds === 1) {
                setTimeout(() => {
                    this.timeflag = true;
                }, 970);
            }
        },
    },
};
</script>
<style lang="less" scoped>
.header {
    border-bottom: 1px solid #040404;
}

.btnClass {
    margin: 16px;
}
</style>
